<template>
  <div>
    <MBX l1="商品管理" l2="添加商品"></MBX>
    <el-card class="xia">
      <el-input
        placeholder="请输入内容"
        class="input-with-select"
        v-model="obj.query"
        @input="toSreach"
        clearable
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="toSreach"
        ></el-button>
      </el-input>
      <el-button type="primary" class="btn" @click="TanShop"
        >添加商品</el-button
      >
      <!-- // 表格 -->
      <el-table border :data="fromShop" class="xia">
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column
          label="商品名称"
          prop="goods_name"
          width="600"
        ></el-table-column>
        <el-table-column
          label="商品价格(元)"
          prop="goods_price"
        ></el-table-column>
        <el-table-column label="商品重量" prop="goods_weight"></el-table-column>
        <el-table-column label="创建时间">
          <template slot-scope="scope">
            <div>
              {{ scope.row.add_time | time }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="Shopdel(scope.row.goods_id)"
              ></el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- // 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 40, 100]"
        :page-size="obj.pagesize"
        :current-page="obj.pagenum"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        class="xia"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { ShopDelListapi } from '@/http/api'
import _ from 'lodash'
export default {
  name: '',
  components: {},
  data() {
    return {
      fromShop: [],
      obj: {
        query: '',
        pagenum: 1,
        pagesize: 10
      },
      total: 0
    }
  },
  created() {
    this.getShop()
  },
  mounted() {},
  methods: {
    async getShop() {
      const res = await this.$QHL.ShopListapi(this.obj)
      const { goods, total } = res
      //   console.log(res)
      this.fromShop = goods
      this.total = total
    },
    // 分页
    handleSizeChange(val) {
      this.obj.pagesize = val
      this.getShop()
    },
    handleCurrentChange(val) {
      this.obj.pagenum = val
      this.getShop()
    },
    // 搜索
    toSreach: _.debounce(function () {
      this.getShop()
    }, 1000),
    TanShop() {
      this.$router.push('/add')
    },
    Shopdel(id) {
      console.log(id)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        ShopDelListapi(id)
          .then((res) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getShop()
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      })
    }
  }
}
</script>
<style scoped lang="scss">
.input-with-select {
  width: 30%;
}
.btn {
  margin-left: 5px;
}
::v-deep .cell {
  font-size: 12px;
}
</style>
